<template>
    <Layout />
    <loading v-if="isLoading" :isLoading="isLoading" />
    <div v-else class="home-box ">
        <div class="left-container">
            <div class="left-top">
                <div class="title">
                    <div class="title-line"></div>
                    我的面试
                </div>
                <div class="date-picker-wrapper">
                    <a-date-picker v-model:value="selectedDate" :bordered="false" :allowClear="false"
                        class="custom-date-picker" @change="onDateChange" />
                    <span class="weekday">{{ weekDay }}</span>
                </div>
            </div>
            <div class="content">
                <div v-if="!interviews.length" class="empty-state">
                    <img src="/public/images/empty-calendar.png" class="empty-icon" alt="暂无面试" />
                    <div class="empty-text">暂无面试安排</div>
                    <div class="empty-subtext">今天可以休息啦～</div>
                </div>
                <template v-else>
                    <a-timeline>
                        <a-timeline-item v-for="interview in interviews" :key="interview.id">
                            <template #dot>
                                <div class="custom-dot"></div>
                            </template>
                            <!-- 0未确认1已确认2已拒绝 -->
                            <div class="interview-item" :class="{
                                rejected: interview.statusZh === 'rejected',
                                completed: interview.statusZh === 'completed'
                            }">
                                <div class="time">{{ interview.begin }}~{{ interview.end }}</div>
                                <div class="interview-info">
                                    <div class="interview-title">{{ interview.meeting_name }}</div>
                                    <div class="interview-people">
                                        <span>面试官：用户</span>
                                        <span>候选人：{{ interview.user_name }}</span>
                                    </div>
                                    <!-- <div class="meeting-info">
                                        <span>会议号：{{ interview.meetingId }}</span>
                                    </div> -->
                                </div>
                                <div class="status-tag">
                                    <CheckOutlined v-if="interview.statusZh === 'completed'" class="check-icon" />
                                    <a-tag v-else :color="getStatusConfig(interview.statusZh).color">
                                        {{ getStatusConfig(interview.statusZh).text }}
                                    </a-tag>
                                </div>
                            </div>
                        </a-timeline-item>
                    </a-timeline>
                </template>
            </div>
        </div>
        <div class="right-container">
            <div class="right-top">
                <div class="section-title">
                    <div class="title-line"></div>
                    面试已反馈
                </div>
                <div class="feedback-list">
                    <div v-for="feedback in feedbacks" :key="feedback.id" class="feedback-item" @click="goToFeedback(feedback.id,feedback.averageScore)">
                        <div class="interview-name">{{ feedback.mname }}</div>
                        <div class="interview-info">
                            <span class="candidate">面试者：{{ feedback.uname }}</span>
                            <span class="feedback-time">反馈时间：{{ feedback.update_time }}</span>
                        </div>
                        <div class="score-line">
                            综合评分：<span class="score">{{ feedback.averageScore }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-bottom">
                <div class="section-title">
                    <div class="title-line"></div>
                    最近待开始面试
                </div>
                <div class="next-interview">
                    <div class="meeting-title">{{ nextInterview.title }}</div>
                    <div class="meeting-details">
                        <div class="meeting-id">
                            <div>候选人：</div>
                            <div class="id-wrapper">
                                <span>{{ nextInterview.name }}</span>
                                <!-- <a-button type="link" class="copy-btn" @click="copyMeetingId">复制</a-button> -->
                            </div>
                        </div>
                        <div class="countdown">
                            <div>距开始还剩</div>
                            <div class="time-left">{{ countdown }}</div>
                        </div>
                    </div>
                    <a-button data-track-test="数据埋点测试数据" class="join-btn"
                        @click="goToMeeting(nextInterview.id)">去面试</a-button>

                </div>
            </div>
        </div>
        <!-- <a-modal v-model:open="joinMeetVisible" title="请确认面试会议">
            <div class="join-meet-info">
                <div>会议名称： 高级前端面试 </div>
                <div class="flex ">
                    <div class="meet-name">您的姓名：</div><a-input v-model:value="userName"></a-input>
                </div>
            </div>
            <template #footer>
                <a-button key="submit" type="primary" @click="handleOk">
                    确定进入面试
                </a-button>
            </template>
        </a-modal> -->
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import { CheckOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { getInterview, getEvaluations } from '../apis/api/home'
import { InterviewRequest, MyInterview, Evaluation } from '../apis/types/home'

const router = useRouter()
let isLoading = ref(false)
const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) || {}
console.log(userInfo, 'userInfo');


const selectedDate = ref(dayjs())
const weekDay = ref('')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const getWeekDay = (date: any) => {
    return weekDays[date.day()]
}
const onDateChange = (date: any) => {
    if (date) {
        weekDay.value = getWeekDay(date)
        getInterviewFn()
    }
}

//时间格式转换
const formattedDate = (data: Date) => {
    const date = new Date(data);
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const formattedDate = `${hours}:${minutes}`;
    return formattedDate
}
async function getInterviewFn() {
    isLoading.value = true
    const month = selectedDate.value.$M + 1 < 10 ? `0${selectedDate.value.$M + 1}` : selectedDate.value.$M + 1;
    const day = selectedDate.value.$D + 1 < 10 ? `0${selectedDate.value.$D}` : selectedDate.value.$D;

    const params: InterviewRequest = {
        day: `${selectedDate.value.$y}-${month}-${day}`, // 假设你希望传递当前选中的日期
        userId: userInfo.id // 假设你有一个用户ID
    };
    await getInterview(params).then((res: any) => {
        let data = res.data.data
        console.log('data: ', data)
        if (res.data.code == 200) {
            // data.begin = data.begin.substring(11, 16)
            data = data.map((item: any) => {
                item.begin = formattedDate(item.begin)
                item.end = formattedDate(item.end)
                item.statusZh = item.status == 0 ? 'InterviewStatus.UNCONFIRMED' : item.status == 1 ? 'InterviewStatus.CONFIRMED' : item.status == 2 ? 'InterviewStatus.REJECTED' : 'InterviewStatus.COMPLETED'
                return item
            })
            isLoading.value = false
            interviews.value = data || []

        } else {
            isLoading.value = false
        }

    })
    await getEvaluations({ id: userInfo.id }).then((res: any) => {
        if (res.data.code == 200) {
            const data = res.data.data
            feedbacks.value = data.map((item: any) => {
                item.update_time = dayjs(item.update_time).format('YYYY-MM-DD HH:mm:ss')
                item.scores = JSON.parse(item.evoluation).score.map((item1: any)=>item1.score )
                item.averageScore = Math.round(item.scores.reduce((a: any, b: any) => a + b, 0) / item.scores.length).toFixed(2)
                return item
            })
        }
        console.log(feedbacks.value, '反馈数据');
    });
}
onMounted(() => {
    getInterviewFn()
    weekDay.value = getWeekDay(selectedDate.value)
    updateCountdown()
    setInterval(updateCountdown, 1000) // 每秒更新一次
})

// 面试状态枚举
const InterviewStatus = {
    COMPLETED: 'completed',
    CONFIRMED: 'confirmed',
    UNCONFIRMED: 'unconfirmed',
    REJECTED: 'rejected'
}

// 状态配置
const statusConfig = {
    [InterviewStatus.CONFIRMED]: {
        color: 'success',
        text: '已确认'
    },
    [InterviewStatus.UNCONFIRMED]: {
        color: 'warning',
        text: '未确认'
    },
    [InterviewStatus.REJECTED]: {
        color: 'error',
        text: '已拒绝'
    }
}

// 模拟面试数据
const interviews = ref<MyInterview[]>([])

// 反馈数据
const feedbacks = ref<Evaluation[]>([])
// 会议数据，根据计算获取所有面试中最近的一场面试，然后存起来
const nextInterview = ref({
    id: '7',
    title: '前端工程师面试',
    name: '张三',
    startTime: '2025-01-21 15:30:00'
})

const countdown = ref('')

const updateCountdown = () => {
    const now = dayjs()
    const start = dayjs(nextInterview.value.startTime)
    const diff = start.diff(now)

    if (diff <= 0) {
        countdown.value = '面试已开始'
        return
    }

    const hours = String(Math.floor(diff / 3600000)).padStart(2, '0')
    const minutes = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
    const seconds = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
    countdown.value = `${hours}:${minutes}:${seconds}`
}

// const copyMeetingId = () => {
//     navigator.clipboard.writeText(nextInterview.value.meetingId)
//     // message.success('会议号已复制')
// }
// let joinMeetVisible = ref(false);
// const userName = ref('颜斌')
// const handleOk = () => {
//     joinMeetVisible.value = false;
// }
const goToMeeting = (id: string) => {
    // joinMeetVisible.value = true;
    router.push({
        path: '/video',
        query: { interviewId: id }
    })
}

const goToFeedback = (id:number,averageScore:number) => {
    router.push({
        path: '/feedback',
        query: { id,averageScore }
    })
    // navigateTo('/feedback',{id:1})
}
// 获取状态配置
const getStatusConfig = (status: any) => statusConfig[status] || statusConfig[InterviewStatus.UNCONFIRMED]
</script>

<style lang="scss" scoped>
.home-box {
    display: flex;
    gap: 20px;
    height: calc(100vh - 24px);
    width: calc(100% - 50px);
    padding: 12px 20px;
    box-sizing: border-box;

    .left-container {
        width: 70%;
        background-color: rgba(35, 39, 47, 0.6);
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        .left-top {
            padding: 20px 20px 0 20px;

            // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            .date-picker-wrapper {
                padding: 0;
            }

            .title {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #fff;
                font-size: 18px;
                font-weight: 500;

                .title-line {
                    width: 4px;
                    height: 20px;
                    background: linear-gradient(180deg, #6772FF 0%, #00F9E5 100%);
                    border-radius: 2px;
                }
            }
        }

        .content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            margin: 0 0 20px 0;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 3px;
            }

            :deep(.ant-timeline) {
                padding-left: 160px;

                .ant-timeline-item-tail {
                    border-left: 2px solid rgba(255, 255, 255, 0.1);
                }

                .ant-timeline-item-head {
                    background: transparent;
                    padding: 0;
                }

                .custom-dot {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
                }
            }

            .interview-item {
                position: relative;
                padding: 0 0 20px;
                display: flex;
                align-items: flex-start;
                gap: 20px;

                .time {
                    position: absolute;
                    // top: 10px;
                    left: -200px;
                    font-size: 24px;
                    font-family: 'DIN Alternate', 'Arial', sans-serif;
                    font-weight: 700;
                    width: 160px;
                    text-align: right;
                    line-height: 24px;
                    margin-right: 10px;
                    color: rgb(181, 178, 178);
                    letter-spacing: 1px;
                }

                .interview-info {
                    flex: 1;
                    color: #fff;

                    .interview-title {
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 8px;
                    }

                    .interview-people {
                        font-size: 14px;
                        color: rgba(255, 255, 255, 0.7);
                        margin-bottom: 4px;

                        span {
                            margin-right: 20px;
                        }
                    }

                    .meeting-info {
                        font-size: 14px;
                        color: rgba(255, 255, 255, 0.7);
                    }
                }

                .status-tag {
                    padding-top: 4px;
                    min-width: 60px;
                }

                &.rejected {
                    .time {
                        color: rgba(181, 178, 178, 0.4) !important;
                    }

                    .interview-info {
                        .interview-title {
                            text-decoration: line-through;
                            color: rgba(255, 255, 255, 0.4);
                        }

                        .interview-people,
                        .meeting-info {
                            color: rgba(255, 255, 255, 0.4);
                        }
                    }

                    .custom-dot {
                        opacity: 0.4;
                    }
                }

                &.completed {
                    .time {
                        color: rgba(181, 178, 178, 0.4);
                    }

                    .interview-info {
                        .interview-title {
                            color: rgba(255, 255, 255, 0.4);
                        }

                        .interview-people,
                        .meeting-info {
                            color: rgba(255, 255, 255, 0.4);
                        }
                    }

                    .custom-dot {
                        opacity: 0.4;
                    }
                }
            }

            .interview-item:hover {
                cursor: pointer;
                background-color: rgba(35, 39, 47, 1);
                border-radius: 10px;
                padding: 10px;
            }

            .empty-state {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 20px;

                .empty-icon {
                    width: 200px;
                    height: 200px;
                    margin-bottom: 24px;
                    opacity: 0.8;
                }

                .empty-text {
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.85);
                    margin-bottom: 12px;
                    font-weight: 500;
                }

                .empty-subtext {
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.45);
                }
            }
        }
    }

    .right-container {
        width: 30%;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .right-top {
            height: 60%;
            background-color: rgba(35, 39, 47, 0.6);
            border-radius: 10px;
            display: flex;
            flex-direction: column;

            .section-title {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 20px;
                color: #fff;
                font-size: 18px;
                font-weight: 500;

                .title-line {
                    width: 4px;
                    height: 20px;
                    background: linear-gradient(180deg, #6772FF 0%, #00F9E5 100%);
                    border-radius: 2px;
                }
            }

            .feedback-list {
                padding: 0 10px;
                flex: 1;
                overflow-y: auto;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: rgba(255, 255, 255, 0.2);
                    border-radius: 3px;
                }

                .feedback-item {
                    padding: 15px 20px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                    &:last-child {
                        border-bottom: none;
                    }

                    .interview-name {
                        color: #fff;
                        font-size: 16px;
                        margin-bottom: 8px;
                    }

                    .interview-info {
                        margin-bottom: 8px;
                        color: rgba(255, 255, 255, 0.5);
                        font-size: 14px;

                        .candidate {
                            margin-right: 15px;
                        }

                        .feedback-time {
                            font-size: 13px;
                        }
                    }

                    .score-line {
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 14px;

                        .score {
                            color: #52c41a;
                            font-weight: 500;
                        }
                    }
                }

                .feedback-item:hover {
                    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                    transform: translateY(-5px);
                    transition: all 0.3s ease;
                }

            }

            .feedback-list :hover {
                cursor: pointer;
                background-color: rgba(35, 39, 47, 1);
                border-radius: 10px;
            }

        }

        .right-bottom {
            height: 40%;
            background-color: rgba(40, 44, 52, 0.6);
            border-radius: 10px;
            padding: 20px;

            .section-title {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #fff;
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 20px;

                .title-line {
                    width: 4px;
                    height: 20px;
                    background: linear-gradient(180deg, #6772FF 0%, #00F9E5 100%);
                    border-radius: 2px;
                }
            }

            .next-interview {
                margin-top: 20px;

                .meeting-title {
                    background: rgba(103, 114, 255, 0.2);
                    padding: 12px;
                    border-radius: 8px;
                    color: #fff;
                    font-size: 16px;
                    margin-bottom: 15px;
                }

                .meeting-details {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;

                    .meeting-id {
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 15px;
                        display: flex;
                        height: 40px;
                        line-height: 40px;


                        .id-wrapper {
                            // display: flex;
                            // align-items: center;
                            // gap: 10px;
                            // margin-top: 5px;

                            // .copy-btn {
                            //     padding: 0;
                            //     height: auto;
                            //     color: #6772FF;
                            // }
                        }
                    }

                    .countdown {
                        text-align: right;
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 14px;

                        .time-left {
                            color: #ff4d4f;
                            font-size: 16px;
                            margin-top: 5px;
                        }
                    }
                }

                .join-btn {
                    width: 100%;
                    height: 40px;
                    background: linear-gradient(315deg, #6772FF 0%, #00F9E5 100%);
                    border: none;
                    border-radius: 8px;
                    color: #fff;
                    font-size: 16px;

                    &:hover {
                        opacity: 0.9;
                    }
                }
            }
        }
    }


}

.join-meet-info {
    padding: 20px 40px;
    font-size: 15px;

    .meet-name {
        width: 98px;
    }

}

.join-meet-info div {
    padding: 10px 0;
}

.left-top {
    .date-picker-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        gap: 10px;

        .weekday {
            color: #fff;
            font-size: 16px;
        }
    }
}

:deep(.custom-date-picker) {
    background-color: transparent;
    color: #fff;
    font-size: 16px;

    .ant-picker-input>input {
        color: #fff;
        font-size: 16px;
    }

    .ant-picker-suffix {
        color: rgba(255, 255, 255, 0.7);
    }
}


.check-icon {
    color: #52c41a;
    font-size: 16px;
}
</style>